<template>
  <a-form-model
    class="detailPaddingPage"
    style="display: flex; flex-direction: column"
    :layout="formLayout"
    :colon="false">
    <!-- 操作信息 -->
    <a-form-model-item :label="$t('operationInfo')" class="customFormModelItem2"> </a-form-model-item>
    <a-form-model-item>
      <a-row >
        <!-- 模板类型 -->
        <a-col :md="8" :sm="24">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('templateType') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.businessName?formData.businessName:'-'"></table-ellipsis>
              </a-form-model-item></a-col>
          </a-row>
        </a-col>
        <!-- 申请人 -->
        <a-col :md="8" :sm="24">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('applicant') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.startUserName?formData.startUserName:'-'"></table-ellipsis>
              </a-form-model-item></a-col>
          </a-row>
        </a-col>
        <!-- 申请时间 -->
        <a-col :md="8" :sm="24">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('applicationTime') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.createTime?$options.filters.moment(formData.createTime):'-'">
                </table-ellipsis>
              </a-form-model-item></a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row>
        <!-- 服务备注 -->
        <a-col :md="24" :sm="24">
          <a-row>
            <a-col :md="3" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('remark') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="20" :sm="24">
              <a-form-model-item>
                {{ formData.instanceResponse.remark?formData.instanceResponse.remark:'-' }}
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-form-model-item>
    <!-- 车型服务 -->
    <a-form-model-item :label="$t('vehicleModelService')" class="customFormModelItem2"> </a-form-model-item>
    <a-form-model-item>
      <a-row >
        <!-- 车型代码 -->
        <a-col :md="8" :sm="8">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('modelCode') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.code?formData.code:'-'"></table-ellipsis>
              </a-form-model-item></a-col>
          </a-row>
        </a-col>
        <!-- 车型名称 -->
        <a-col :md="8" :sm="8">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('modelName') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.name?formData.name:'-'"></table-ellipsis>
              </a-form-model-item></a-col>
          </a-row>
        </a-col>
        <!-- 款型代码 -->
        <a-col :md="8" :sm="8">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('stereotypeCode') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.trimLevelCode?formData.trimLevelCode:'-'"></table-ellipsis>
              </a-form-model-item></a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row >
        <!-- 款型名称 -->
        <a-col :md="8" :sm="8">
          <a-row>
            <a-col :md="9" :sm="24">
              <a-form-model-item class="deepClass">
                {{ $t('stereotype') }}
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item>
                <table-ellipsis :text="formData.trimLevel?formData.trimLevel:'-'"></table-ellipsis>
              </a-form-model-item></a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-table
        :columns="columns"
        :data-source="tableData"
        :pagination="false"
        style="width:90%;marginLeft:5%"
        v-show="showEcuTable">
        <template
          slot="serviceId"
          slot-scope="text,record"
        >
          <a v-if="text" @click="handleVersionDepend(record)">{{ $t('view') }}</a>
          <span v-else>-</span>
        </template>
        <!-- <span
          slot="enableState"
          slot-scope="text,record">
          {{ $options.filters.DictLabelFilter(record.enableState,yesOrNoEnumArr10) }}
        </span> -->
        <span
          slot="saleState"
          slot-scope="text">
          {{ saleStateTypeObj[text] }}
        </span>
        <span
          slot="activeState"
          slot-scope="text,record">
          {{ $options.filters.DictLabelFilter(record.activeState,yesOrNoEnumArr10) }}
        </span>
        <span
          slot="needStudy"
          slot-scope="text,record">
          {{ $options.filters.DictLabelFilter(record.needStudy,yesOrNoEnumArr10) }}
        </span>
      </a-table>
    </a-form-model-item>
    <service-Version-depend :serviceId="id" :modelId="modelId.substring(0,modelId.indexOf(':'))" ref="versionDependRef">
    </service-Version-depend>
  </a-form-model>
</template>
<script>
import QuestionMarkTip from '@/views/components/QuestionMarkTip'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import ServiceVersionDepend from '@/views/components/ServiceVersionDepend.vue'
import { serviceTableColumns, yesOrNoEnumArr10 } from '../config/list'
export default {
  components: { TableEllipsis, QuestionMarkTip, ServiceVersionDepend },
  data () {
    return {
      formLayout: 'horizontal',
      yesOrNoEnumArr10,
      showEdit: false,
      tableData: [],
      columns: serviceTableColumns,
      showEcuTable: true,
      id: '',
      formData: {
        businessName: '',
        startUserName: '',
        createTime: '',
        trimLevel: '',
        trimLevelCode: '',
        code: '',
        name: '',
        instanceResponse: {}
      },
      modelId:''
    }
  },
  mounted () {
    this.getApplicationDetail()
    this.modelId=this.$route.query.key
  },
  computed:{
    saleStateTypeObj () {
      return this.$store.getters.saleStateTypeObj()
    },
  },
  methods: {
    // 获取申请内容详情
    getApplicationDetail () {
      this.$api.getServiceApplicationDetail1({
        modelId: this.$route.query.key,
        instanceId: this.$route.query.id
      }).then((res) => {
        console.log(res, '恢复')
        this.tableData = res.data
      })
      this.$api.getServiceApplicationDetail2({
        id: this.$route.query.key,
        instanceId: this.$route.query.id
      }).then((res) => {
        this.formData.businessName = res.data.instanceResponse.businessName
        this.formData.startUserName = res.data.instanceResponse.startUserName
        this.formData.createTime = res.data.instanceResponse.createTime
        this.formData.instanceResponse = res.data.instanceResponse
        this.formData.code = res.data.code
        this.formData.name = res.data.name
        this.formData.trimLevel = res.data.trimLevel
        this.formData.trimLevelCode = res.data.trimLevelCode
      })
    },
    // 查看版本依赖
    handleVersionDepend (data) {
      this.id = data.serviceId
      this.$refs.versionDependRef.visible = true
    }
  }
}
</script>
<style lang="less" scoped>
::v-deep .ant-form-item{
margin-bottom: 8px ;
}
::v-deep .deepClass{
    font-weight: 600;
    margin-right: 38px;
    text-align: right;

}
::v-deep .ant-form-item-label {
    font-weight: 600;
    margin-right: 12px;
}
  .customFormModelItem2 {
      ::v-deep .ant-form-item-label {
        &::before {
          display: inline-block;
          content: '';
          width: 6px;
          background-color: rgba(67, 136, 166, 1);
          height: 14px;
          vertical-align: middle;
          margin-right: 3px;
        }
      }
    }
</style>
